import { useEffect, useState } from "react"
import { View } from "@tarojs/components"
import { Icon, Popup, Picker } from "@antmjs/vantui"
import WowField from "../WowField"

import "./index.less"

const WowSelectLayer = props => {

  const layers = ['2-14层', '15-20层', '20层以上']
  const layersValue = layers.map((e, i) => i)

  const [show, setShow] = useState(false)

  const [currentLayer, setCurrentLayer] = useState(layers[1])
  const [currentLayerValue, setCurrentLayerValue] = useState(layersValue[1])

  const togglePopup = () => {
    setShow(!show)
  }

  const confirmLayer = (e) => {
    setCurrentLayer(layers[e.detail.index])
    setCurrentLayerValue(layersValue[e.detail.index])
    togglePopup()
  }

  useEffect(() => {
    props.onConfirm && props.onConfirm(currentLayerValue)
  }, [currentLayerValue])

  return (
    <View className="wow-select-layer-wrapper">
      {/* 输入框 */}
      <WowField
        {...props}
        disabled
        value={`当前选择大秘境层数: ${currentLayer}`}
        renderIcon={<Icon name="arrow" />}
        placeholder="请选择大秘境层数"
        onClickInput={togglePopup} />
      {/* 弹出层 */}
      <Popup onClickOverlay={togglePopup} position="bottom" show={show}>
        {/* 选择器 */}
        <Picker
          onConfirm={confirmLayer}
          onCancel={togglePopup}
          title="请选择大秘境层数"
          defaultIndex={layers.findIndex(e => e === currentLayer)}
          columns={layers} />
      </Popup>
    </View>
  )
}

export default WowSelectLayer